<template>
	<view>
		<image class="justify-center imgtop" src="../../static/sort/top.png"></image>
		<view class="box">
			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input v-model="key" @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="请输入关键字" confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-green shadow-blur round" @click="onSearch">搜索</button>
				</view>
			</view>
		</view>
		
		<view class="u-card-wrap">
			<u-card :padding="padding" :border="border">
				<view slot="body">
					<view v-for="(item,index) in list" :key="index" class="u-body-item u-flex u-border-bottom u-p-t-0 u-col-3 u-row-between" @click="click(item.name,item.sort_id)">
						<view class="u-body-item-title u-line-1">
							{{item.name}}
						</view>
						<view></view>
						<image style="margin-right: 10rpx;width: 80rpx;height: 80rpx;" :src="'../../static/sort/'+item.sort_id+'.png'" mode="aspectFit"></image>
					</view>
					
				</view>
			</u-card>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-popup border-radius="10" v-model="show1" 
			@close="close" @open="open" mode="center" 
			length="80%" class="wrap" :mask="mask"
			:closeable="closeable"
			:close-icon-pos="closeIconPos"
		>
			<view style="width: 100%;height: 200rpx;margin-top: 0;background-color: #0066CC;">
				<image style="width: 150rpx;height: 150rpx;margin-top: 15rpx;margin-left: 15rpx;" src="../../static/sort/可回收垃圾.png"></image>
				
			</view>
			<view class="text-bold text-lg margin-lr-sm" v-text="name"></view>
			<view class="text-bold text-lg margin-lr-sm">为可回收垃圾</view>
			<view class="margin-lr-sm">可回收物是指，适宜回收利用和资源化利用的生活废弃物，如纸张、废塑料、废玻璃制品、废金属、废植物等。</view>
			<view class="text-bold text-lg margin-lr-sm">可回收主要包括</view>
			<view class="margin-lr-sm">报纸、纸箱、书本、广告单、塑料瓶、塑料玩具、油桶、酒瓶、玻璃杯、易拉罐、旧铁锅、旧衣服、包、就玩偶、就数码产品、旧家电</view>
			<view class="text-bold text-lg margin-lr-sm">可回收投放要求</view>
			<view class="margin-lr-sm">1、轻投轻放</view>
			<view class="margin-lr-sm">2、清洁干燥、避免污染、废纸尽量平整</view>
			<view class="margin-lr-sm">3、立体包装请清空内容物，清洁后压扁投放</view>
		</u-popup>
		<u-popup border-radius="10" v-model="show2"
			@close="close" @open="open" mode="center" 
			length="80%" class="wrap" :mask="mask"
			:closeable="closeable"
			:close-icon-pos="closeIconPos"
		>
			<view style="width: 100%;height: 200rpx;margin-top: 0;background-color: #ed6d78;">
				<image style="width: 150rpx;height: 150rpx;margin-top: 15rpx;margin-left: 15rpx;" src="../../static/sort/ed6d78.png"></image>
				
			</view>
			<view class="text-bold text-lg margin-lr-sm" v-text="name"></view>
			<view class="text-bold text-lg margin-lr-sm">为有害垃圾</view>
			<view class="margin-lr-sm">有害垃圾是指，对人体健康或者自然环境造成直接或潜在的危害废手物</view>
			<view class="text-bold text-lg margin-lr-sm">有害垃圾主要包括</view>
			<view class="margin-lr-sm">废电池（充电电池、铅酸电池、纽扣电池等）、废弃油、消毒剂、艾光灯管、含禾温度计、非药品及其他包装物等</view>
			<view class="text-bold text-lg margin-lr-sm">有害垃圾投放要求</view>
			<view class="margin-lr-sm">1、轻投轻放</view>
			<view class="margin-lr-sm">2、清洁干燥、避免污染、废纸尽量平整</view>
			<view class="margin-lr-sm">3、立体包装请清空内容物，清洁后压扁投放</view>
		</u-popup>
		<u-popup border-radius="10" v-model="show3"
			@close="close" @open="open" mode="center" 
			length="80%" class="wrap" :mask="mask"
			:closeable="closeable"
			:close-icon-pos="closeIconPos"
		>
			<view style="width: 100%;height: 200rpx;margin-top: 0;background-color: #47b97e;">
				<image style="width: 150rpx;height: 150rpx;margin-top: 15rpx;margin-left: 15rpx;" src="../../static/sort/47b97e.png"></image>
				
			</view>
			<view class="text-bold text-lg margin-lr-sm" v-text="name"></view>
			<view class="text-bold text-lg margin-lr-sm">为厨余(易腐)垃圾</view>
			<view class="margin-lr-sm">厨余垃圾是指居民日常生活及食品加工、饮食服务、单位供餐等活动中产生的垃圾</view>
			<view class="text-bold text-lg margin-lr-sm">厨余垃圾主要包括</view>
			<view class="margin-lr-sm">丢夺不用的菜叶、剩菜、剩饭、果皮、蛋克、茶渣、骨头等</view>
			<view class="text-bold text-lg margin-lr-sm">厨余垃圾投放要求</view>
			<view class="margin-lr-sm">1、厨余垃圾应当提供给专业化没处单位进行处理</view>
			<view class="margin-lr-sm">2、严禁将废存食用油脂（包括地沟油）加工后作为食用油食用</view>
			<view class="margin-lr-sm">3、纯油质的食物垃圾、如牛奶等，应直接倒进厨余垃圾桶</view>
		</u-popup>
		<u-popup border-radius="10" v-model="show4" class="wrap"
			@close="close" @open="open" mode="center" 
			length="80%" :mask="mask"
			:closeable="closeable"
			:close-icon-pos="closeIconPos"
		>
			<view style="width: 100%;height: 200rpx;margin-top: 0;background-color: #6d5f5e;">
				<image style="width: 150rpx;height: 150rpx;margin-top: 15rpx;margin-left: 15rpx;" src="../../static/sort/6d5f5e.png"></image>				
			</view>
			<view class="text-bold text-lg margin-lr-sm" v-text="name"></view>
			<view class="text-bold text-lg margin-lr-sm">为其他垃圾</view>
			<view class="margin-lr-sm">其它垃圾危害较小，耽误再利用价值，如建筑垃圾类，生活垃圾类等，一般采用填埋、焚烧、卫生分解等方法，部分还可食用生物解决，如放蛛等</view>
			<view class="text-bold text-lg margin-lr-sm">其它垃圾主要包括</view>
			<view class="margin-lr-sm">砖瓦陶瓷、渣土、卫生间废纸、瓷器碎片等难以回收的废弃物</view>
			<view class="text-bold text-lg margin-lr-sm">其它垃圾投放要求</view>
			<view class="margin-lr-sm">1、采用卫生填埋可有效减少对地下水，地表水，土壤级空气的污染</view>
			<view class="margin-lr-sm">2、难以辨识类别的生活垃圾投入其他垃圾容器内</view>

		</u-popup>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				list:[],				
				show1: false,
				show2: false,
				show3: false,
				show4: false,
				padding: 20,
				bottomSlot: true,
				border: true,
				closeable: true,
				mask: true, // 是否显示遮罩
				closeIconPos: 'top-right'
			};
		},
		onLoad(e) {
			this.name = e.id;
		},
		// 监听页面显示
		onShow() {
			this.$H.get('/commen/sort/get-sortId/'+this.name).then(res=>{
				let [err,result] = res;
				if(result.data.code == '200'){
					this.list = result.data.data;
					
					
					return;
				}
			})	
			
		},
		computed: {
			
		},
		methods: {
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			click(name,sort_id) {
				//console.info(name)
				this.name = name
				if(sort_id=='1')
				this.show1=true;
				else if(sort_id=='2')
				this.show2=true;
				else if(sort_id=='3')
				this.show3=true;
				else{
                    //console.info(this.name)
					this.show4=true;
				}
				
			},
			onSearch(){
				this.$H.get('/commen/sort/get-sortId/'+this.key).then(res=>{
					let [err,result] = res;
					if(result.data.code == '200'){
						this.list = result.data.data;
						
						
						return;
					}
				})	
			},
			open() {
				// console.log('open');
			},
			close() {
				// console.log('close');
			},
		}
	}
</script>

<style>
	.imgtop{
		width: 100%;
		height: 100px;
	}
</style>
<style scoped lang="scss">
	.wrap {
		padding: 24rpx;
	}
	
	.u-card-wrap { 
		background-color: $u-bg-color;
		padding: 1px;
	}
	
	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}
		
	/*.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}*/
</style>